<template>
  <div
    class="theme-container home-container"
    :class="pageClasses"
  >
    <HomeNavbar @toggle-sidebar="toggleSidebar" />

    <div
      class="sidebar-mask"
      @click="toggleSidebar(false)"
    />

    <Sidebar
      :items="sidebarItems"
      @toggle-sidebar="toggleSidebar"
    >
      <template #top>
        <slot name="sidebar-top" />
      </template>
      <template #bottom>
        <slot name="sidebar-bottom" />
      </template>
    </Sidebar>

    <Home />

    <page-footer />
  </div>
</template>

<script>
import Home from '@theme/components/Home.vue'
import HomeNavbar from '@theme/components/HomeNavbar.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import PageFooter from '@theme/components/PageFooter.vue'
import { resolveSidebarItems } from '../util'

export default {
  name: 'HomeLayout',

  components: { Home, HomeNavbar, Sidebar, PageFooter },

  data() {
    return {
      isSidebarOpen: false,
    }
  },

  computed: {
    shouldShowNavbar() {
      const { themeConfig } = this.$site
      const { frontmatter } = this.$page
      if (
        frontmatter.navbar === false
        || themeConfig.navbar === false) {
        return false
      }
      return (
        this.$title
        || themeConfig.logo
        || themeConfig.repo
        || themeConfig.nav
        || this.$themeLocaleConfig.nav
      )
    },

    sidebarItems() {
      return resolveSidebarItems(
        this.$page,
        this.$page.regularPath,
        this.$site,
        this.$localePath,
      )
    },

    pageClasses() {
      const userPageClass = this.$page.frontmatter.pageClass
      return [
        {
          'no-navbar': !this.shouldShowNavbar,
          'sidebar-open': this.isSidebarOpen,
          'no-sidebar': !this.shouldShowSidebar,
        },
        userPageClass,
      ]
    },
  },

  methods: {
    toggleSidebar(to) {
      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
      this.$emit('toggle-sidebar', this.isSidebarOpen)
    },
  },
}
</script>

<style lang="stylus" scoped>
.home-container
  overflow-x hidden
</style>
